<template>
  <div>
    <Header></Header>
    <Modal v-if="isOpen"></Modal>
    <Main></Main>
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { ref, watchEffect } from 'vue'
import Header from './components/Header'
import Modal from './components/Modal'
import Main from './components/Main'
export default {
  components: {
    Header,
    Modal,
    Main
  },

  setup() {
    const { commit, state } = useStore()

    let isOpen = ref(state.isOpen)

    watchEffect(() => {
      isOpen.value = state.isOpen
    })

    const template = [
      {
        label: 'Items',
        submenu: [
          {
            label: 'Add New',
            click: () => {
              commit('setIsOpen', true)
            },
            accelerator: 'CmdOrCtrl+O'
          }
        ]
      },
      {
        role: 'editMenu'
      },
      {
        role: 'windowMenu'
      },
      {
        role: 'help',
        submenu: [
          {
            label: 'Learn more',
            click: () => { shell.openExternal('https://github.com/stackacademytv/master-electron') }
          }
        ]
      }
    ]

    // Set Mac-specific first menu item
    if (process.platform === 'darwin') {

      template.unshift({
        label: global.remote.app.getName(),
        submenu: [
          { role: 'about' },
          { type: 'separator'},
          { role: 'services' },
          { type: 'separator'},
          { role: 'hide' },
          { role: 'hideothers' },
          { role: 'unhide' },
          { type: 'separator'},
          { role: 'quit' }
        ]
      })
    }

    const menu = global.remote.Menu.buildFromTemplate(template)

    // Set as main app menu
    global.remote.Menu.setApplicationMenu(menu)

    return {
      isOpen
    }
  }
}
</script>

<style lang='stylus' scoped>

</style>
